<script lang="ts" setup>

import { ref, computed } from 'vue'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import { pageQuery, getComplaint, agree, disagree, deleteComplaint } from '@/api/complaint'
import type { Complaint } from '@/api/complaint/type'
import type { BaseResponse, BasePageReq } from '@/api/base'
import { toast } from '@/utils/common'
import storage from '@/utils/storage'

const complaintList = ref<Complaint[]>([])
const loadStatus = ref<string>('loadmore')
const moreStatus = ref<boolean>(true)
const pageReq = ref<BasePageReq>({ pageNum: 1, pageSize: 5 })
const bubbleMenuShow = ref<boolean>()
const x = ref<number>(0)
const y = ref<number>(0)
const currentData = ref<Complaint>()
const userId = storage.get('user_info').id

const loadComplaintList = async () => {
  loadStatus.value = 'loading'
  try {
    const res: BaseResponse = await pageQuery(pageReq.value)
    if (pageReq.value.pageNum == 1 && res.data.records.length < pageReq.value.pageSize) {
      loadStatus.value = 'nomore'
      moreStatus.value = false
      complaintList.value = complaintList.value.concat(res.data.records)
      pageReq.value.total = res.data.total
      return
    }
    if (!res.data || res.data.records.length == 0 || res.data.total < complaintList.value.length) {
      loadStatus.value = 'nomore'
      moreStatus.value = false
      return
    }
    if (pageReq.value.pageNum === 1) {
      complaintList.value = res.data.records || []
    } else {
      complaintList.value = complaintList.value.concat(res.data.records)
    }
    loadStatus.value = 'loadmore'
    pageReq.value.pageNum++
  } catch (error) {
    loadStatus.value = 'nomore'
    moreStatus.value = false
    toast(error.tips)
  }
}
const loadDetail = async (item: Complaint) => {
  const res: BaseResponse = await getComplaint(item.id)
  item.reject = res.data.reject
  item.agree = res.data.agree
  item.comment = res.data.comment
  item.agreeCount = res.data.agreeCount
  item.commentCount = res.data.commentCount
  item.rejectCount = res.data.rejectCount
}

const reload = async () => {
  // 重置分页参数
  pageReq.value.pageNum = 1
  // 清空当前列表
  complaintList.value = []
  // 重新加载数据
  await loadComplaintList()
}

onLoad(() => {
  loadComplaintList()
})
uni.$on('backRefresh', () => {
  reload()
})
const popData = computed(() => {
  return [{ title: '删除' }, { title: '编辑' }]
})

onReachBottom(() => {
  // 如果依然还有数据，就触发
  if (moreStatus.value == true) {
    loadStatus.value = 'loading'
    setTimeout(() => {
      loadComplaintList()
      loadStatus.value = 'loadmore'
    }, 500)
  }
})

const getSize = computed(() => {
  const v = uni.upx2px(750) - 40
  const w = v / 3
  return {
    width: w + 'px',
    height: w + 'px'
  }
})

const optAgree = async (item: Complaint) => {
  try {
    await agree(item.id)
    loadDetail(item)
  } catch (error) {
    toast(error.tips)
  }
}
const optDisAgree = async (item: Complaint) => {
  try {
    await disagree(item.id)
    loadDetail(item)
  } catch (error) {
    toast(error.tips)
  }
}
const jumpToDetail = (item: Complaint) => {
  uni.navigateTo({
    url: '/pages/complaint/detail?id=' + item.id
  })
}

const createComplaint = () => {
  uni.navigateTo({
    url: '/pages/complaint/create'
  })
}
const showBubbleMenu = (item: Complaint, event: any) => {
  x.value = event.touches[0].clientX
  y.value = event.touches[0].clientY + 5
  bubbleMenuShow.value = !bubbleMenuShow.value
  currentData.value = item
}
const optDelete = async () => {
  try {
    await deleteComplaint(currentData.value.id)
    toast('删除成功')
    reload()
  } catch (error) {
    toast(error.tips)
  }
}
const tapPopup = async (i: any) => {
  if (i.title === '删除') {
    optDelete()
  } else {
    uni.navigateTo({
      url: '/pages/complaint/edit?id=' + currentData.value.id
    })
  }
}

</script>

<template>
  <div class="complaint">
    <view class="complaint-list">
      <view class="complaint-item" v-for="(item, index) in complaintList" :key="index">
        <user-info class="complaint-item-userinfo" :data="item">
          <uv-icon v-if="userId == item.userId" name="more-dot-fill" @click="showBubbleMenu(item, $event)"></uv-icon>
        </user-info>
        <view class="complaint-item-content" @click="jumpToDetail(item)">
          <kevy-ellipsis :textId="index" :content="item.content" :rows="3" expand-text="展开" collapse-text="收起"
            :key="index" :font-size="28"></kevy-ellipsis>
        </view>
        <uv-grid v-if="item.pic" class="complaint-item-pic" :border="false">
          <uv-grid-item v-for="(p, index) in item.pic?.split(',')" :key="index" style="margin-bottom: 10rpx;">
            <my-image :customStyle="getSize" :index="index" :src="p"></my-image>
          </uv-grid-item>
        </uv-grid>
        <view class="complaint-item-opt">
          <view class="complaint-item-opt-item" @click="optAgree(item)">
            <uv-text class="complaint-item-opt-item-text" :color="item.agree ? '#1e80ff' : '#999'" size="28rpx"
              lineHeight="50rpx" :iconStyle="{ 'font-size': '40rpx', 'color': item.agree ? '#1e80ff' : '#999' }"
              :prefixIcon="item.agree ? 'thumb-up-fill' : 'thumb-up'"
              :text="item.agreeCount ? item.agreeCount : '点赞'"></uv-text>
          </view>
          <view class="complaint-item-opt-item" @click="jumpToDetail(item)">
            <uv-text class="complaint-item-opt-item-text" :color="item.comment ? '#1e80ff' : '#999'" size="28rpx"
              lineHeight="50rpx" :iconStyle="{ 'font-size': '40rpx', 'color': item.comment ? '#1e80ff' : '#999' }"
              :prefixIcon="item.comment ? 'chat-fill' : 'chat'"
              :text="item.commentCount ? item.commentCount : '评论'"></uv-text>
          </view>
          <view class="complaint-item-opt-item" @click="optDisAgree(item)">
            <uv-text class="complaint-item-opt-item-text" :color="item.reject ? '#1e80ff' : '#999'" size="28rpx"
              lineHeight="50rpx" :iconStyle="{ 'font-size': '40rpx', 'color': item.reject ? '#1e80ff' : '#999' }"
              :prefixIcon="item.reject ? 'thumb-down-fill' : 'thumb-down'"
              :text="item.rejectCount ? item.rejectCount : '点踩'"></uv-text>
          </view>
        </view>
      </view>
    </view>
    <view style="background-color: #fff; padding: 10px 0;">
      <uv-load-more style="margin: 0;" bgColor="#fff" :status="loadStatus" @loadmore="loadComplaintList"></uv-load-more>
    </view>
    <view class="complaint-add">
      <uv-avatar icon="edit-pen" size="100rpx" fontSize="52rpx" bg-color="#409eff" color="#fff"
        @click="createComplaint"></uv-avatar>
    </view>
    <bubble-menu v-model="bubbleMenuShow" :popData="popData" direction="row" @tapPopup="tapPopup" :x="x" :y="y"
      placement="top-end">
    </bubble-menu>
  </div>
</template>

<style lang="scss">
.complaint-list {
  display: flex;
  flex-direction: column;
  background-color: #fff;

  .complaint-item {
    display: flex;
    flex-direction: column;
    padding: 20rpx;
    border-bottom: 1px solid #f1f1f1;

    .complaint-item-userinfo {
      margin-bottom: 10rpx;
      padding: 0;
    }

    .complaint-item-content {
      margin-bottom: 10rpx;
    }

    .complaint-item-pic {
      margin-bottom: 20rpx;
    }

    .complaint-item-opt {
      display: flex;
      padding: 0 30rpx;
      height: 50rpx;
      justify-content: space-between;

      .complaint-item-opt-item {
        width: 15%;
        display: flex;
        align-items: center;
      }
    }
  }
}

.complaint-add {
  // 渐变
  position: fixed;
  bottom: 100rpx;
  right: 30rpx;
}
</style>